<!-- 支付方式 -->
<template>
  <div class="payment">
     <van-field
      readonly
      clickable
      label="支付方式"
      :value="defaultpay"
      placeholder="选择支付方式"
      @click="showPicker = true"
    />
    <van-popup v-model="showPicker" position="bottom">
      <van-picker
        show-toolbar
        :columns="elbG"
        @confirm="onConfirm "
        @cancel="showPicker = false"
      />
    </van-popup>
  </div>
</template>

<script>
export default {
  name: "payment",
  data() {
    return {
      showPicker:false,
      elbG: [ "预付"],
      defaultpay:'预付',

    };
  },
  methods: {
     onConfirm(value, index) {
      console.log("确认选择该地址",value,index);
      this.defaultpay = value;
      this.showPicker = false;
   
    },
    selectMethods(index) {
      if (!index == 0) {
        this.act = index;
      } else {
        this.$Notify({ type: "info", message: "此功能正在努力开发中敬请期待..." });
       
      }
    }
  }
};
</script>
<style lang='scss' scoped>
.payment {
  width: 100%;
  h5 {
    line-height: 50px;
    margin-left: 15px;
  }
  ul {
    margin-left: 15px;
    display: flex;
    flex-direction: row;
    li {
      padding: 0 10px;
      &:first-child {
        padding: 0px;
      }
      .el-button {
        letter-spacing: 2px;
        padding: 0 40px;
        line-height: 30px;
      }
      .active {
        background: #0078ff;
        color: #fff;
      }
    }
  }
}
</style>